import { App, Group, Debug, PointerEvent } from 'leafer-ui'
import { EditorEvent, EditorGroupEvent } from '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/editor' // 导入图形编辑器插件
import { Tools } from './utils/create'
import { TooltipPlugin } from 'leafer-x-tooltip-canvas'
import { ScrollBar } from '@leafer-in/scroll'
import * as Draws from './Render/index'
import * as Handles from './Event/index'
import { events } from './utils/emit'
import Command from './utils/command'

class Render {

    constructor(document, config) {
        Debug.enable = false
        this.app = new App({
            view: document,
            editor: {}
        })
        this.group = new Group({
            draggable: false
        })
        this.color = '#000'
        this.background = 'rgba(255, 255, 255, 0)'
        this.result = true
        this.clone = false
        this.config = config;
        this.rule = null
        this.snap = null
        this.matrix = null
        this.models = null
        this.draws = {}
        this.handles = {}
        this.create = false
        this.menuevent = true
        this.eventUp = false
        this.tooltip = new TooltipPlugin(this.app, {
            info: ['width', 'height'],
            includesType: ['Rect', 'Ellipse', 'Text', 'Line', 'Polygon'],
            formatter: (item) => {
                if (item.data && item.data.host) {
                    return item.data.host.name
                } else {
                    return '暂无绑定'
                }
            }
        })
        this.init()
        this.tools = new Tools(this)
        new ScrollBar(this.app)
    }
    init() {
        this.draws[Draws.Rule.name] = new Draws.Rule(this.app, this.config).init()
        this.draws[Draws.SnapRender.name] = new Draws.SnapRender(this.app, this.config).init()
        this.draws[Draws.Matrix.name] = new Draws.Matrix(this.app, this.config).init()

        this.handles[Handles.MouseEvent.name] = new Handles.MouseEvent(this).MouseEvent()
        this.handles[Handles.MouseEvent.name].handles();

        this.handles[Handles.MouseClick.name] = new Handles.MouseClick(this).MouseEvent()
        this.handles[Handles.MouseClick.name].handles();

        this.handles[Handles.MenuEvent.name] = new Handles.MenuEvent(this).MenuEvent()
        this.handles[Handles.MenuEvent.name].handles();

        this.app.editor.on(EditorEvent.SELECT, (e) => {
            if (e.value) {
                events.emit('select', e.value)
            }
        })
        this.app.on(PointerEvent.MOVE, (e) => {
            if (this.eventUp) {
                this.tools.createImage(this.models, e.getPage())
                this.eventUp = false
            }
        })
        this.app.on(PointerEvent.CLICK, (e) => {
            if (this.clone) {
                let model = this.models.clone()
                const { x, y } = e.getPage()
                if (this.selectList && this.selectList.length && this.selectList.length > 0) {

                } else {

                }
                model.x = x
                model.y = y
                this.app.tree.add(model)
                this.models = null
                this.clone = false
            }
        })
        new Command(this.app)
        events.emit('init', this)
    }
    load(data, e) {

    }
    createModel(val) {

        this.handles[Handles.MouseEvent.name].handles((size, obj) => {
            this.tools.creatRect(val.type, size, obj)
        });

    }
    addGroup(arr) {
        this.group.children(arr)
        console.log(`output->this.group`, this.group)
        this.app.tree.add(this.group)
    }
    render() {
        this.draws[Draws.Matrix.name].render()
    }

}

export default Render 